/*
 * 图标集类型和属性：https://react-native-training.github.io/react-native-elements/docs/icon.html
 * 方案：https://google.github.io/material-design-icons/
 * --Lucia
 * */

import React, { Component } from "react"
import "./element-icon.scss"


interface ElementsIconProp {
  size?: number
  name: string
  type?: string // 图标集的分类
  color?: string
  iconStyle?: object
  containerStyle?: object
  className?: string
}

export class ElementsIcon extends Component<ElementsIconProp, {}> {
  render() {
    let { type = "material", name, containerStyle } = this.props

    return (
      <span className="element-icon-container" style={{ display: "inline-block", ...containerStyle }}>
        <i className={`${type}-icons`} {...this.props}>
          {name}
        </i>
      </span>
    )
  }
}
